<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>签到登录</title>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <style>
        .f_r{
            float: right;
        }
        .f_l{
            float: left;
        }
        .clearfix:after{
            content: '';
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .clearfix{
            zoom: 1;/*兼容IE游览器*/
        }
        *{
            box-sizing: border-box;
        }
        html,body{
            width: 100%;
            height: 100%;
            margin:  0;
            padding: 0;
        }
        ::-webkit-input-placeholder {
            /* WebKit, Blink, Edge */
            color: #ffffff;
        }

        :-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #ffffff;
        }

        ::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #ffffff;
        }

        :-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: #ffffff;
        }
        .container{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
            background-color: #F88A99;
        }
        .bgc_box_white{
            width: 80%;
            /*padding-bottom: 80%;*/
            height: calc(80% * 1.6777);
            background-color: #fff;
            border-radius:50%;
            position:relative;
            top: -15%;
            right: -46%;
            z-index: 1;
        }
        .login_box{
            width: 80%;
            height: 80%;
            position: absolute;
            background-color: #fff;
            border-radius: 6px;
            z-index: 99;
            top: 10%;
            left: 10%;
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
            display: flex;
            justify-content:center;
        }
        .left_login{
            width: 50%;
            height: 100%;
            padding-top: 20px;
        }
        .right_login{
            width: 50%;
            height: 100%;
            background-image: url("./img/fengmian1.png");
            background-position: 0 50%;
            -webkit-background-size: cover;
            background-size: cover;
        }
        .left_login .login_content{
            /*margin-top: 12%;*/
            text-align: center;
        }
        .login_content h1 {
            line-height: 1.5;
            margin: 0;
            padding: 0;
            font-size: 42px;
            font-weight: 500;
        }
        .login_content h2 {
            line-height: 1;
            margin-bottom: 30px;
            margin-top: 0;
            padding: 0;
            font-size: 20px;
            font-weight: 500;
        }
        .login_content input[type=text]{
            width: 298px;
            height: 45px;
            border-radius: 6px;
            background-color: #666666;
            border: none;
            font-size: 18px;
            color: white;
            padding-left: 10px;
            outline: none;
        }
        .login_content input[type=password]{
            width: 298px;
            height: 45px;
            border-radius: 6px;
            background-color: #666666;
            border: none;
            font-size: 18px;
            color: white;
            padding-left: 10px;
            outline: none;
            margin-top: 17px;
        }
        .login_content .login_form{
            width: 298px;
            display: inline-block;
        }
        .login_content .password_tip{
            display: inline-block;
            width: 298px;
            text-align: left;
            margin-top: 15px;
            margin-bottom: 20px;
        }
        .login_content .password_tip span{
            font-size: 14px;
            color: #666666;
        }
        .login_content .password_tip input[type=checkbox]{
            vertical-align: middle;
            cursor: pointer;
        }
        .login_content .password_tip div{
            font-size: 14px;
            color: #666666;
            text-decoration-line: underline;
            cursor: pointer;
        }
        .login_btn{
            width: 298px;
            height: 45px;
            line-height: 45px;
            background-color: #F88A99;
            font-size: 22px;
            color: black;
            text-align: center;
            border: none;
            border-radius: 6px;
            box-shadow: 0 5px 2px #e86b99;
            cursor: pointer;
            outline: none;
            margin-bottom: 28px;
        }
        .login_btn:hover{
            opacity: 0.6;
        }
        .bottom_tip{
            text-align: left;
            font-size: 14px;
            color: #666666;
        }
        .login_content .login_logo{
            width: 115px;
            height: 136px;
        }
        button.disabled {
            background: #AAA;
            color: #FFF;
            box-shadow: 0 5px 1px 0 #999;
            cursor: default;
        }

        button.disabled:hover {
            opacity: 1;
        }
        /*手机端样式*/
        .mobile{
            width: 100%;
            height: 100%;
            display: none;
        }
        .mobile_login_box{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .mobile_login_box .mobile_login{
            width: 100%;
        }
        .mobile_login_box .mid_title{
            font-size: 20px;
            color: #333333;
            margin: 0;
        }
        .mobile_login_box .login_form input{
            border: none;
            width: 70%;
            height: 45px;
            line-height: 45px;
            outline: none;
            background-color: #EBEBEB;
            font-size: 16px;
            color: #999999;
            text-align: left;
            padding-left: 10px;
            border-radius: 6px;
        }
        .mobile_login_box .login_form input[type=text]{
            margin-bottom: 20px;
        }
        .mobile_login .login_form .forget_psd{
            width: 70%;
            display: inline-block;
            margin-top: 20px;
            text-align: right;
            font-size: 16px;
            color: #666666;
            text-decoration: underline;
        }
        .mobile_login .login_form .mobile_login_btn{
            width: 70%;
            height: 45px;
            line-height: 45px;
            background-color: #F88A99;
            font-size: 16px;
            color: white;
            text-align: center;
            border: none;
            border-radius: 6px;
            box-shadow: 0 5px 2px #e86b99;
            cursor: pointer;
            outline: none;
            margin-bottom: 20px;
            display: inline-block;
            margin-top: 20px;
        }
        .mobile_login .login_form .register_tip{
            font-size: 16px;
            color: #666666;
            display: inline-block;
            text-align: left;
            width: 70%;
        }
        .mobile_login .login_form .register_tip span{
            text-decoration: underline;
            cursor: pointer;
        }
        @media screen and (max-height: 800px){
            .login_box{
                height: 90%;
                top: 5%;
            }
        }
        @media screen and (max-width: 1200px){
            .login_box{
                height: 90%;
                top: 5%;
            }
        }
        @media screen and (max-width: 1110px){
            .login_box{
                height: 90%;
                top: 5%;
            }
            .left_login .login_content{
                margin-top: 20px;
            }
            .login_content h2{
                margin-bottom: 10px;
            }
            .login_content input[type=password]{
                margin-top: 10px;
            }
            .login_content .password_tip{
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .login_btn{
                margin-bottom: 10px;
            }
        }
        @media screen and (max-width: 1000px){
            .login_box{
                width: 80%;
                height: 450px;
                position: absolute;
                left: 10%;
                top: calc((100% - 450px) / 2);
            }
            .login_content .login_logo{
                width: 57px;
                height: 68px;
            }
            .login_content h1 {
                font-size: 24px;
            }
            .login_content h2 {
                font-size: 16px;
            }
            .login_content input[type=text]{
                width: 200px;
                height: 35px;
                font-size: 12px;
            }
            .login_content input[type=password]{
                width: 200px;
                height: 35px;
                font-size: 12px;
            }
            .login_content .password_tip{
                width: 200px;
            }
            .login_content .password_tip span{
                font-size: 12px;
            }
            .login_content .password_tip div{
                font-size: 12px;
            }
            .login_btn{
                width: 200px;
                height: 35px;
                line-height: 35px;
                font-size: 14px;
            }
            .bottom_tip{
                width: 200px;
                font-size: 12px;
                display: inline-block;
            }
        }
        @media screen and (max-width: 780px){
            /*适应小屏幕的，让小屏幕的不显示*/
            .login_box{
                display: none;
            }
            .bgc_box_white{
                display: none;
            }
            .mobile{
                display: block;
            }
            ::-webkit-input-placeholder {
                /* WebKit, Blink, Edge */
                color: #999999;
            }
            .container{
                background-color: #fff;
            }

            :-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #999999;
            }

            ::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #999999;
            }

            :-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                color: #999999;
            }
        }
        @media screen and (max-width: 780px) and (max-height: 415px){
            .container{
                min-height: 500px;
                overflow: auto;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="bgc_box_white"></div>
    <div class="login_box">
        <div class="left_login">
            <div style="display: flex;justify-content: center;align-items: center;height:calc(100% - 50px)">
                <div class="login_content">
                    <img src="./image/logo.png" alt="" class="login_logo" width="115" height="136">
                    <h2>班级签到</h2>
                    <div class="login_form">
                        <input type="text" placeholder="请输入学号" id="userid" ><br/>
                        <input type="password" placeholder="密码" id="userpsd" ><br/>
                        <div class="password_tip clearfix">
                            <input type="checkbox" value="记住密码" id="check"><span>记住密码</span>
                            <div class="f_r">忘记密码</div>
                        </div>
                        <button class="login_btn">登录</button>
                        <div class="bottom_tip">
                            <div style="display: inline-block">还没有帐号？<span style="text-decoration-line: underline;cursor: pointer">注册</span></div>
                            <div class="f_r" style="text-decoration-line: underline;cursor: pointer">返回</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right_login"></div>
    </div>
    <div class="mobile">
        <div class="mobile_login_box">
            <div class="mobile_login">
                <p class="mid_title" style="margin-bottom: 20px">班级签到</p>
                <div class="login_form">
                    <input type="text" placeholder="请输入学号"  id="mobile_userid"><br>
                    <input type="password" placeholder="密码" id="mobile_userpsd">
                    <div class="forget_psd"><span style="cursor: pointer">忘记密码</span></div>
                    <button class="mobile_login_btn">登录</button>
                    <div class="register_tip">
                        还没有账号？<span >注册</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('.login_btn').click(getUserInfo);
        $('.mobile_login_btn').click(mobileGetUserInfo);
        function getUserInfo() {
            $('.login_btn').attr('disabled', 'disabled').addClass('disabled').html('登 录 中 ....');
            var userid = $('#userid').val();
            var userpsd = $('#userpsd').val();
            if(!userid.trim()){
                confirm('用户账号不能为空');
                return
            }else if(!userpsd.trim()){
                confirm('用户密码不能为空');
                return
            }else {
                uploadUserInfo(userid,userpsd,'.login_btn','#userpsd');
            }
        }
        function mobileGetUserInfo() {
            $('.mobile_login_btn').attr('disabled', 'disabled').addClass('disabled').html('登 录 中 ....');
            var userid = $('#mobile_userid').val();
            var userpsd = $('#mobile_userpsd').val();
            console.log(userpsd);
            if(!userid.trim()){
                confirm('用户账号不能为空');
                return
            }else if(!userpsd.trim()){
                confirm('用户密码不能为空');
                return
            }else {
                uploadUserInfo(userid,userpsd,'.mobile_login_btn','#mobile_userpsd');
            }
        }
        function uploadUserInfo(userid,userpsd,btn,psd) {
            $.ajax({
                type: "post",
                url: "http://111.230.141.221:3000/student/login",
                data: {
                    studentGuid: userid,
                    studentPsd: userpsd
                },
                success: function(res) {
                    if (res.data.length=== 1) {
                        console.log(res.data);
                    } else {
                        alert('用户名或者密码错误！');
                        errFun(btn,psd);
                    }
                }
            });
        }
        function errFun(btn,psd) {
            $(btn).attr('disabled', false).removeClass('disabled').html('登 录');
            $(psd).val('');
        }
    })
</script>
</body>
</html>